<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Api } from "../../assets/api/api";
import type { HomeClassificationType } from "../../home";

//图书分类
const bookClassifyData1 = ref<Array<Object>>([]);
const bookClassifyData2 = ref<Array<Object>>([]);
const bookClassifyData3 = ref<Array<Object>>([]);
const bookClassifyData4 = ref<Array<Object>>([]);
const bookClassifyData5 = ref<Array<Object>>([]);
const bookClassifyData6 = ref<Array<Object>>([]);
//   热门标签
const hotLabelData = ref<Array<HomeClassificationType>>([]);
const hotLabelTags = ref([
  "权谋",
  "超能",
  "护花",
  "古代",
  "医术",
  "政治",
  "爽文",
  "装叉",
  "帝少",
  "开挂",
  "战神",
  "狂婿",
]);
// 热键分类好书
const hotClassifyData = ref([]);

// 获取图书分类数据
const getBooksClassificationData = async () => {
  let { data } = await Api.requestHomeClassificationData();
  let mainData = data.list[0].labels;
  bookClassifyData1.value.push(mainData[0]);
  bookClassifyData1.value.push(mainData[1]);
  bookClassifyData2.value.push(mainData[2]);
  bookClassifyData2.value.push(mainData[3]);
  bookClassifyData3.value.push(mainData[4]);
  bookClassifyData3.value.push(mainData[5]);
  bookClassifyData4.value.push(mainData[6]);
  bookClassifyData4.value.push(mainData[7]);
  bookClassifyData5.value.push(mainData[8]);
  bookClassifyData5.value.push(mainData[9]);
  bookClassifyData6.value.push(mainData[10]);
  bookClassifyData6.value.push(mainData[11]);
};
// 获取热门标签数据
const getHotData = async () => {
  let { data } = await Api.getHomePageUrl();
  for (let i = 0; i < 3; i++) {
    hotLabelData.value.push(data.data.list[3].list[i]);
    hotLabelData.value.push(data.data.list[4].list[i]);
    hotLabelData.value.push(data.data.list[5].list[i]);
    hotLabelData.value.push(data.data.list[6].list[i]);
  }
  for (let i = 0; i < hotLabelData.value.length; i++) {
    hotLabelData.value[i].title = hotLabelTags.value[i];
  }
  // 热键分类好书
  hotClassifyData.value = data.data.list[7].list;
  hotClassifyData.value.splice(2, 1);
};

onMounted(() => {
  getBooksClassificationData();
  getHotData();
});
</script>

<template>
  <div class="classification_view">
    <h1 class="book_classify">图书分类</h1>
    <!-- 图书分类 -->
    <div class="book_classify_ul">
      <div class="book_classify_li">
        <span v-for="(item, index) in bookClassifyData1" :key="item.ur">{{
          item.name
        }}</span>
      </div>
      <div class="book_classify_li">
        <span v-for="item in bookClassifyData2" :key="item.ur">{{
          item.name
        }}</span>
      </div>
      <div class="book_classify_li">
        <span v-for="(item, index) in bookClassifyData3" :key="item.ur">{{
          item.name
        }}</span>
      </div>
      <div class="book_classify_li">
        <span v-for="(item, index) in bookClassifyData4" :key="item.ur">{{
          item.name
        }}</span>
      </div>
      <div class="book_classify_li">
        <span v-for="(item, index) in bookClassifyData5" :key="item.ur">{{
          item.name
        }}</span>
      </div>
      <div class="book_classify_li">
        <span v-for="(item, index) in bookClassifyData6" :key="item.ur">{{
          item.name
        }}</span>
      </div>
    </div>
    <!-- 热门标签 -->
    <div class="hot_label">
      <h1 class="book_classify">
        <span>热门标签</span> <span class="refresh">换一换</span>
      </h1>
      <ul class="hot_label_ul">
        <li v-for="item in hotLabelData" :key="item.id">{{ item.title }}</li>
      </ul>
    </div>
    <!-- 热键分类好书 -->
    <div class="good_book">
      <h1 class="book_classify">热键分类好书</h1>
      <ul class="good_book_ul">
        <li v-for="item in hotClassifyData" :key="item.id">
          <van-image width="168" height="226" :src="item.cover" />
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.book_classify {
  background-color: #fff;
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px;
  color: #5f5f5f;
  font-weight: normal;
  height: 38px;
  border-bottom: 1px solid #dedede;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .refresh {
    font-size: 12px;
    color: #f2503c;
  }
}
.book_classify_ul {
  background-color: #fff;
  margin-bottom: 10px;
  .book_classify_li {
    display: flex;
    span {
      display: block;
      flex: 1;
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 14px;
      color: #333;
      border-right: 1px solid #dedede;
      border-bottom: 1px solid #dedede;
      &:nth-of-type(2n) {
        border-right: none;
      }
    }
  }
}
.hot_label {
  background-color: #fff;
  margin-bottom: 10px;
  .hot_label_ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 16px 10px 4px;
    li {
      width: 78px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border: 1px solid #d2d6d8;
      background-color: #f3f3f3;
      color: #000;
      font-size: 13px;
      margin-bottom: 11px;
    }
  }
}
.good_book {
  background-color: #fff;
  margin-bottom: 20px;
  .good_book_ul {
    display: flex;
    justify-content: space-between;
    padding: 20px 12px 15px;
    p {
      height: 23px;
      line-height: 23px;
      font-size: 12px;
      color: #000;
      text-align: center;
    }
  }
}
</style>